<?php
$configKey = isset($configKey) ? $configKey : 'dev-services';
// 样式类定义 - 一维数组结构
$classes = [
    // 区块相关样式
    'section_container' => 'w-full mx-auto mb-20',
    'section_text_center' => 'text-center mb-16',
    'section_pretitle' => 'inline-block text-sm font-semibold uppercase tracking-wider mb-2',
    'section_title' => 'text-3xl md:text-4xl font-bold text-gray-900 mb-4',
    'section_subtitle' => 'text-lg text-gray-600 max-w-3xl mx-auto',
    'section_grid' => 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-20',
    
    // 卡片相关基础样式
    'card_base' => 'p-8 rounded-xl transition-all duration-300 h-full',
    'card_modern' => 'bg-white shadow-md hover:shadow-xl hover:-translate-y-1',
    'card_classic' => 'bg-white border border-gray-200 hover:border-primary',
    'card_minimal' => 'bg-transparent hover:bg-gray-50',
    
    // 卡片内容样式
    'card_icon_container' => 'w-16 h-16 rounded-lg flex items-center justify-center mb-6 text-2xl transition-transform duration-500',
    'card_title' => 'text-xl font-semibold mb-3 text-gray-900 transition-colors duration-300',
    'card_description' => 'text-gray-600 mb-6',
    'card_features_list' => 'space-y-2 mb-6',
    'card_feature_item' => 'flex items-center text-sm text-gray-700',
    'card_feature_icon' => 'fa fa-check mr-2',
    'card_learn_more' => 'text-sm font-medium mt-4 inline-block transition-colors duration-300',
    
    // 成果展示样式
    'results_container' => 'p-4 rounded-lg border border-gray-200 mb-6',
    'results_title' => 'text-sm font-medium text-gray-900 mb-3',
    'results_grid' => 'grid grid-cols-2 gap-3',
    'results_metric' => 'text-xs text-gray-500',
    'results_value' => 'text-lg font-bold',
    
    // 案例研究样式
    'case_study' => 'text-sm text-gray-700 italic',
    
    // 动画相关样式
    'animation_service_card' => 'service-card'
];
// 移动应用开发服务配置
$defaultConfig = [
    'section_id' => $configKey,
    'section_pretitle' => '移动技术',
    'section_title' => '移动应用开发服务',
    'section_subtitle' => '打造高性能、用户友好的移动应用，助力企业数字化转型与业务增长',
    'card_style' => 'modern', // modern, classic, minimal
    'texts' => [
        'section_pretitle' => '移动技术',
        'section_title' => '移动应用开发服务',
        'section_subtitle' => '打造高性能、用户友好的移动应用，助力企业数字化转型与业务增长',
        'results_title' => '典型成果',
        'case_study_prefix' => '',
        'learn_more' => '了解更多'
    ],
    'classes' => $classes,
    'items' => [
        [
            'id' => 'native-ios',
            'title' => '原生iOS开发',
            'description' => '基于Swift和Objective-C构建高性能、沉浸式的iOS应用，充分利用苹果生态优势',
            'icon' => 'fa-apple',
            'accent_color' => 'gray-800',
            'features' => [
                'iPhone/iPad应用开发',
                'Apple Watch集成',
                'App Store发布支持',
                'iOS设计规范遵循',
                '性能与安全优化'
            ],
            'results' => [
                '平均评分' => '4.8+',
                '性能提升' => '35%',
                '用户留存' => '78%'
            ],
            'case_study' => '为金融科技公司开发的iOS应用，上线3个月用户突破50万，转化率提升28%'
        ],
        [
            'id' => 'native-android',
            'title' => '原生Android开发',
            'description' => '基于Kotlin和Java打造适配多设备的Android应用，提供一致优质的用户体验',
            'icon' => 'fa-android',
            'accent_color' => 'green-600',
            'features' => [
                '多设备适配',
                'Material Design实现',
                'Google Play发布',
                '后台服务优化',
                '离线功能支持'
            ],
            'results' => [
                '设备兼容性' => '99%',
                '启动速度' => '2.3s',
                '用户满意度' => '94%'
            ],
            'case_study' => '为电商平台开发的Android应用，加载速度提升40%，购物车转化率提高32%'
        ],
        [
            'id' => 'cross-platform',
            'title' => '跨平台开发',
            'description' => '采用React Native和Flutter技术，一次开发多平台运行，降低成本加速上线',
            'icon' => 'fa-code-fork',
            'accent_color' => 'blue-600',
            'features' => [
                'iOS/Android同步开发',
                '共享代码库',
                '原生性能体验',
                '快速迭代能力',
                '统一设计语言'
            ],
            'results' => [
                '开发成本' => '-40%',
                '上线时间' => '-50%',
                '代码复用率' => '85%'
            ],
            'case_study' => '为教育科技公司开发跨平台应用，节省50%开发时间，双平台用户增长达120万'
        ],
        [
            'id' => 'mobile-optimization',
            'title' => '移动应用优化',
            'description' => '提升现有应用性能、用户体验与转化率，解决崩溃、卡顿等技术问题',
            'icon' => 'fa-rocket',
            'accent_color' => 'orange-500',
            'features' => [
                '性能瓶颈分析',
                'UI/UX改进',
                '崩溃率降低',
                '加载速度优化',
                '电池使用优化'
            ],
            'results' => [
                '崩溃率' => '-92%',
                '加载时间' => '-65%',
                '用户留存' => '+40%'
            ],
            'case_study' => '为社交应用进行性能优化，崩溃率从8%降至0.6%，日活跃用户增长35%'
        ]
    ]
];


$data = array_merge($defaultConfig, $pageConfig['components'][$configKey] ?? []);

// 卡片样式映射
$cardStyleMap = [
    'modern' => $data['classes']['card_modern'],
    'classic' => $data['classes']['card_classic'],
    'minimal' => $data['classes']['card_minimal']
];

// 组合基础卡片样式和选中的卡片样式
$cardClass = $data['classes']['card_base'] . ' ' . ($cardStyleMap[$data['card_style']] ?? $cardStyleMap['modern']);
?>

<div class="<?php echo $data['classes']['section_container']; ?>">
    <div class="<?php echo $data['classes']['section_text_center']; ?>">
        <?php if (!empty($data['texts']['section_pretitle'])): ?>
            <span class="<?php echo $data['classes']['section_pretitle']; ?>">
                <?php echo htmlspecialchars($data['texts']['section_pretitle']); ?>
            </span>
        <?php endif; ?>
        
        <h2 class="<?php echo $data['classes']['section_title']; ?>">
            <?php echo htmlspecialchars($data['texts']['section_title']); ?>
        </h2>
        
        <p class="<?php echo $data['classes']['section_subtitle']; ?>">
            <?php echo htmlspecialchars($data['texts']['section_subtitle']); ?>
        </p>
    </div>
    
    <!-- 开发服务类型 -->
    <div class="<?php echo $data['classes']['section_grid']; ?>">
        <?php foreach ($data['items'] as $index => $item): ?>
            <div class="<?php echo $cardClass; ?> group <?php echo $data['classes']['animation_service_card']; ?>" data-service-id="<?php echo htmlspecialchars($item['id']); ?>">
                <!-- 图标容器 -->
                <div class="<?php echo $data['classes']['card_icon_container']; ?> bg-<?php echo $item['accent_color']; ?>/10 text-<?php echo $item['accent_color']; ?> group-hover:scale-110">
                    <i class="fa <?php echo htmlspecialchars($item['icon']); ?>"></i>
                </div>
                
                <!-- 服务信息 -->
                <h3 class="<?php echo $data['classes']['card_title']; ?> group-hover:text-<?php echo $item['accent_color']; ?>">
                    <?php echo htmlspecialchars($item['title']); ?>
                </h3>
                
                <p class="<?php echo $data['classes']['card_description']; ?>">
                    <?php echo htmlspecialchars($item['description']); ?>
                </p>
                
                <!-- 服务特点 -->
                <ul class="<?php echo $data['classes']['card_features_list']; ?>">
                    <?php foreach ($item['features'] as $feature): ?>
                        <li class="<?php echo $data['classes']['card_feature_item']; ?>">
                            <i class="<?php echo $data['classes']['card_feature_icon']; ?> text-<?php echo $item['accent_color']; ?>"></i>
                            <?php echo htmlspecialchars($feature); ?>
                        </li>
                    <?php endforeach; ?>
                </ul>
                
                <!-- 服务成果 -->
                <div class="<?php echo $data['classes']['results_container']; ?>">
                    <h4 class="<?php echo $data['classes']['results_title']; ?>">
                        <?php echo htmlspecialchars($data['texts']['results_title']); ?>
                    </h4>
                    <div class="<?php echo $data['classes']['results_grid']; ?>">
                        <?php foreach ($item['results'] as $metric => $value): ?>
                            <div>
                                <div class="<?php echo $data['classes']['results_metric']; ?>"><?php echo htmlspecialchars($metric); ?></div>
                                <div class="<?php echo $data['classes']['results_value']; ?> text-<?php echo $item['accent_color']; ?>"><?php echo htmlspecialchars($value); ?></div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>
                
                <!-- 案例简述 -->
                <p class="<?php echo $data['classes']['case_study']; ?>">
                    <?php echo htmlspecialchars($data['texts']['case_study_prefix']); ?>
                    "<?php echo htmlspecialchars($item['case_study']); ?>"
                </p>
                
                <!-- 了解更多链接 -->
                <a href="#<?php echo htmlspecialchars($item['id']); ?>" class="<?php echo $data['classes']['card_learn_more']; ?> text-<?php echo $item['accent_color']; ?> hover:underline">
                    <?php echo htmlspecialchars($data['texts']['learn_more']); ?>
                </a>
            </div>
        <?php endforeach; ?>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 服务卡片动画
    const serviceCards = document.querySelectorAll('.<?php echo $data['classes']['animation_service_card']; ?>');
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
                observer.unobserve(entry.target);
            }
        });
    }, { threshold: 0.1 });
    
    serviceCards.forEach((card, index) => {
        // 初始化卡片样式（不可见状态）
        card.style.opacity = '0';
        card.style.transform = 'translateY(30px)';
        // 每个卡片依次延迟出现，创造级联效果
        card.style.transition = `opacity 0.5s ease ${index * 0.15}s, transform 0.5s ease ${index * 0.15}s`;
        observer.observe(card);
    });
    
    // 为卡片添加交互效果增强
    serviceCards.forEach(card => {
        // 鼠标进入时的额外效果
        card.addEventListener('mouseenter', () => {
            card.style.boxShadow = '0 10px 25px -5px rgba(0, 0, 0, 0.1)';
        });
        
        // 鼠标离开时恢复
        card.addEventListener('mouseleave', () => {
            card.style.boxShadow = '';
        });
    });
});
</script>
    